.c-tree {

  .c-tree-node {

    position: relative;

    .c-tree-ul {

      &-bg {
        background-image: url(./img/icon_tree_line.png);
        background-repeat: repeat-y;
        background-position: 10px -1px;
      }
    }

    .c-tree-item {
      height: 32px;
      line-height: 32px;
      cursor: pointer;
      position: relative;

      &:hover {
        background: #c4dde8;
      }
      &-selected,
      &-selected:hover {
        background: #85cff3;
      }

      .c-tree-btn {
        width: 22px;
        height: 32px;
        background-image: url(./img/icon_tree.png);
        background-repeat: no-repeat;
        display: inline-block;
        vertical-align: middle;

        &-add {
          background-position: -21px -194px;
        }
        &-reduice {
          background-position: -7px -20px;
        }
        &-empty {
          background-position: -21px -53px;
        }

        &-add-nonext {
          background-position: -21px -232px;
        }
        &-reduice-nonext {
          background-position: -7px -164px;
        }
        &-empty-nonext {
          background-position: -21px -91px;
        }

        &-add-root {
          background-position: -34px 9px;
        }
        &-reduice-root {
          background-position: 7px 9px;
        }
        &-empty-root {
          background-position: -76px 9px;
        }
      }

      .c-tree-icon {
        vertical-align: middle;
      }

    }



  }
}